<!DOCTYPE html>
<html lang="zh-CN">

<!--<meta charset="UTF-8">-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>AUTOTESIING</title>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./webuploader/webuploader.css">
    <link href="./css/mycss.css" rel="stylesheet">
    <link href="./css/mycss2.css" rel="stylesheet">

    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./webuploader/webuploader.min.js"></script>
    <script src="./js/myApi.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">LOGO</a>
        </div>
        <div class="navbar-collapse collapse ">
            <ul class="nav navbar-nav ">
                <li><a href="index.html">首页</a></li>
                <li class="active"><a href="index01.html">构建测试</a></li>
                <li><a href="autoTest.html">自动化测试</a></li>
                <li><a href="historyReport.html">历史报告</a></li>
            </ul>
            <ul class="nav navbar-nav pull-right">
                <li class=""><a href="#">登录</a></li>
                <li class=""><a href="#">注册</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>
<!--end naving-->

<!--content starting-->
<div class="container mycontainer" role="main">
    <div class="jumbotron">
        <h2>构建测试</h2>

        <p>
            代码构建测试支持对Android客户端Ant/Maven/Gradle架构代码的构建和扫描，包括项目编译、JUnit单元测试、Findbugs、Checkstyle和PMD代码规范检查。
        </p>
    </div>

    <button type="button" class="btn btn-lg btn-primary testing center-block newgjcsbutton" style="display: none">新建构建
    </button>
    <!--状态栏-->
    <div id="newStepDiv" class="Step-div">
        <ul>
            <li id="newStepTwo" class="oneStep Step-Current" style="width: 338px; display: inline-block;">
                <span class="step-num">1</span>
                上传代码
                <span class="step-arrow-right"></span>
            </li>
            <li id="newStepThree" class="oneStep Step-Unreach" style="width: 338px; display: inline-block;">
                <span class="step-arrow-left"></span>
                <span class="step-num">2</span>
                构建中
                <span class="step-arrow-right"></span>
            </li>
            <li id="newStepFour" class="oneStep Step-Unreach"
                style="margin-right: 0px; width: 338px; display: inline-block;">
                <span class="step-arrow-left"></span>
                <span class="step-num">3</span>
                构建完成
            </li>
        </ul>
    </div>
    <!--上传代码或输入SVN路径-->
    <div class="jumbotron gjcsSetting" style="background-color: #e5e5e5">
        <div id="uploader" class="row">
            <!--用来存放文件信息-->
            <div class=" btns">
                <div class="radio col-md-2">
                    <label>
                        <input id="optionsRadios1" type="radio" name="optionsRadios" value="option1" checked>本地代码
                    </label>
                </div>
                <div id="picker" class="col-md-2">选择文件</div>
            </div>
            <div id="thelist" class="uploader-list"></div>
        </div>

        <div id="svnuploader" class="row">
            <div class="radio col-md-2 ">
                <label>
                    <input id="optionsRadios2" type="radio" name="optionsRadios" value="option2">
                    SVN版本
                </label>
            </div>
            <div id="svnPahinput" class="col-md-3 svnpath">
                <input type="url" class="form-control  svn-path" placeholder="Enter svnPath" autocomplete="on"
                       disabled="disabled">
            </div>
            <div class="col-md-1  vesion">
                版本号
            </div>
            <div id="svnvesrion" class="col-md-3 svnpath">
                <input type="text" class="form-control svn-version" placeholder="svn version" autocomplete="on"
                       disabled="disabled">
            </div>
        </div>
    </div>
    <!--构建测试开始-->
    <button type="button" class="btn btn-lg btn-primary testing center-block gjcsbutton">开始构建</button>


    <div class="jumbotron gjceResult" style="background-color: #e5e5e5;display: none">
        <h5>任务代码：2759282324</h5>
        <h5>名称：demo2</h5>
        <h5>耗时1小时</h5>
        <h5>请点击<a href="historyReport.html"><b>“历史报告”</b></a>查看APK文件</h5>
    </div>

    <div class="consolelog" style="display: none">
           <pre id="doc-content-pre">
               <h4>console output:</h4>
            </pre>
    </div>
</div>
<footer class="footer">
    <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
    </div>
</footer>

<script>
    $("#optionsRadios1").on("click", function () {
        $(".webuploader-element-invisible").removeAttr("disabled").off('click');
        $(".svn-path").attr({"disabled": "disabled"});
        $(".svn-version").attr({"disabled": "disabled"});
    });

    $("#optionsRadios2").on("click", function () {
        $(".svn-path").removeAttr("disabled");
        $(".svn-version").removeAttr("disabled");
        $(".webuploader-element-invisible").attr({"disabled": "disabled"}).off('click');
    });
</script>

<script>
    // 文件上传
    jQuery(function () {
        var $ = jQuery,
                $list = $('#thelist'),
                state = 'pending',
                uploader;

        uploader = WebUploader.create({
//           自动上传
            auto: true,
            // 不压缩image
            resize: false,
            // 文件接收服务端。
            server: 'api/file/management?action=uploadfile&encode=utf-8',
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#picker',
//           只可以上传一个文件
            fileNumLimit: 1,
            // 只允许选择文件，可选。
            accept: {
                title: 'compressed',
                extensions: 'rar,zip'
//                mimeTypes: 'image/*'  application/x-rar-compressed  application/zip
//              mimeTypes:'application/zip'
            }
        });

        $list.html('<div class="item">' + '<h5 class="info" style="padding-left: 300px; margin-top:13px">' + "文件类型需为“RAR”或“ZIP”" + '</h5>' + '</div>');
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            $list.html('<div id="' + file.id + '" class="item" >' +
                    '<h5 class="info" style="padding-left: 300px">' + file.name +
                    '<p class="state" style="color:#4D90FE;font-size: 12px">等待上传...</p>' + '</h5>' +
                    '</div>');
        });


        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress', function (file, percentage) {
            var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');

            // 避免重复创建
            if (!$percent.length) {
                $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width:0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
            }

            $li.find('p.state').text('上传中');
            $percent.css('width', percentage * 100 + '%');
        });

        uploader.on('uploadSuccess', function (file) {
            $('#' + file.id).find('p.state').text('已上传');
//          当文件上传成功后按钮才可以点击..........

        });

        uploader.on('uploadError', function (file) {
            $('#' + file.id).find('p.state').text('上传出错');
            $('#' + file.id).find('p.state').css({'color': 'red'});
        });

        uploader.on('uploadComplete', function (file) {
            $('#' + file.id).find('.progress').fadeOut();
        });

        uploader.on('all', function (type) {
            if (type === 'startUpload') {
                state = 'uploading';
            }
            else if (type === 'uploadFinished') {
                state = 'done';
            }
        });
    });

</script>


<script>
    $(".newgjcsbutton").on("click", function () {
        location.href = 'index01.html';
    });

    $(".gjcsbutton").on("click", function () {
        //job的url请求参数设置
        var getdata = {
            jobname: 'test',
            counts: 67,
            startPos: 0
        };
        //获取请求头部地址,第一次获job控制台输出内容
        var geturl = $.ajax({
            type: "get",
            cache: false,
            dataType: "html",
            url: "/api/job/test/67/logText/progressiveHtml?start=0",
//            url:"/api/job/deployment/73/logText/progressiveText?start=0",
            success: function (resp) {
                console.log(resp);
                //第一次加载控制台log
                if (resp && !resp.code) {
//
                    setAttrion();
                    loadContents(resp);
                }
//              设置一个timer
                var timeOutId = 0;
//                alert(geturl.getResponseHeader("X-Text-Size"));
                var ajaxFn = function () {
                    if (geturl.getResponseHeader("X-More-Data") == "true") {
                        getdata = {
                            jobname: 'test',
                            counts: 67,
                            startPos: geturl.getResponseHeader("X-Text-Size")
                        };
                        geturl = $.ajax({
                            type: "get",
                            cache: false,
                            dataType: "html",
                            url: "/api/job/{0}/{1}/logText/progressiveHtml?start={2}".format(getdata.jobname, getdata.counts, getdata.startPos),
                            success: function (resp2) {
                                if (resp2 && !resp2.code) {
                                    console.log(resp2);
                                    loadContents(resp2);

                                }
                            },
                            error: function () {
                                console.log("ajax error");
                                alert("ajax error");
                            }
                        });
                        //OR use BELOW line to wait 5 secs before first call
                        timeOutId = setTimeout(ajaxFn, 5000);
                    }
                    else if (timeOutId == 0) {
//                      alert("第一次获取信息");
                        console.log("第一次获取信息");
                        loadResult();
                    }
                    else {
                        console.log("构建结束");
//                        alert("构建结束");
                        loadResult();
                    }
                };
                ajaxFn();
            },
            error: function () {
                console.log("ajax error");
                alert("ajax error");
            }
        });
    });

    function setAttrion() {
        $(".consolelog").css({display: "block"});
//        $(".gjcsbutton").attr({"disabled": "disabled",style:"background:url(./gif/loadinganimation.gif) no-repeat center center"});
        $(".newgjcsbutton").css({display: "block"});
        $(".gjcsbutton").css({display: "none"});
        $(".gjcsSetting").css({display: "none"});
        $("#newStepTwo").removeClass('Step-Current').addClass('Step-Unreach');
//        $("#newStepTwo").addClass('Step-Unreach');
        $("#newStepThree").removeClass('Step-Unreach').addClass('Step-Current');
//        $("#newStepThree").addClass('Step-Current');
    }

    function loadContents(contents) {
        $("#doc-content-pre").append(contents);
    }

    function loadResult() {
//        $(".gjcsbutton").text("构建完成");
        $(".gjcsbutton").removeAttr("style");
        $(".gjcsbutton").css({display: "none"});

        $(".gjceResult").css({display: "block"});
        $(".newgjcsbutton").css({display: "block"});

        $("#newStepThree").removeClass('Step-Current');
        $("#newStepThree").addClass('Step-Unreach');
        $("#newStepFour").removeClass('Step-Unreach');
        $("#newStepFour").addClass('Step-Current');
        //构建完成加载构建结果框
    }
</script>
</body>
</html>